<script setup>
import SlideShow from "@/views/home/components/SlideShow.vue";
import AdvertiseShow from "@/views/home/components/AdvertiseShow.vue";
import {useRouter} from "vue-router";
import Accordion from "@/views/home/components/Accordion.vue";
import NewFooter from "@/components/Footer.vue";
import SildeShowLast from "@/views/home/components/SildeShowLast.vue";

const router=useRouter();
</script>

<template>
  <div class="body">


<!--广告部分-->
 <advertise-show></advertise-show>
    <div class="slide-introduce">
      <h3 style="color: rgb(17, 17, 17);">起范装备  618直接到位 </h3>
      <p style="color: rgb(17, 17, 17); font-size:1.2em ">精选产品低至五折，折上至尊享108元满少</p>
      <el-button round class="button" @click="router.push('/product/women')">立即选购</el-button>
    </div>

<!--轮播图部分-->
    <slide-show></slide-show>

<!-- 轮播商品简介   -->
    <div class="slide-introduce">
        <h3 style="color: rgb(17, 17, 17);">上天  不落地 </h3>
        <p style="color: rgb(17, 17, 17);">搭载革命性动态缓震单元，带来高能反馈脚感</p>
        <el-button round class="button" @click="router.push('/product/women')">立即选购</el-button>
    </div>

<!--  图片框-->
    <Accordion></Accordion>

 <!--  图片框下的介绍 -->
    <div class="slide-introduce">
      <h3 style="color: rgb(17, 17, 17);"> 焕春鞋，装点春日 </h3>
      <p style="color: rgb(17, 17, 17);">缤纷色彩解锁元气开学季</p>
      <el-button round class="button" @click="router.push('/product/women')">立即选购</el-button>
    </div>
  <!--最后一个轮播图    -->
    <silde-show-last></silde-show-last>

    <!--footer底部-->
    <div class="footer">
      <new-footer></new-footer>
    </div>
  </div>
</template>

<style>
.body{
  height: 120%;
  background-color:#FFFFFF;
}
.slide-introduce{
  margin-top: 30px;
}
p,h3{
  text-align: center;
  font-size: 1.5em;
}
.button {
  display: block;
  margin: 0 auto;
  font-size: 1.2em;
}
</style>
